12. CSS Transitions

Explanation: CSS Transitions allow smooth changes between property values. Jab koi element hover ya interact hota hai, tab bina jhatke ke animation jaisa effect milta hai. Ye UX ko enhance karta hai.

I. Transition Properties

transition-property: Kaun se CSS property ko transition dena hai (like background-color, width, transform etc.)

II. Transition Duration

transition-duration: Animation kitni der tak chalegi (e.g. 1s, 0.5s). Default 0s hota hai, jisse koi effect nahi dikhta.

III. Transition Timing Function

transition-timing-function: Speed pattern decide karta hai (linear, ease, ease-in, ease-out, ease-in-out).

IV. Transition Delay

transition-delay: Animation start hone se pehle kitni der rukna hai (e.g. 0.5s)

V. Creative Hover Example (All in One)

Creative Transition: Ek box jo hover par rotate, scale aur color change kare smooth transition ke sath.